{extend name="common/pop" /}
{block name="content"}

<div class="layui-form" style="margin-top:15px;width:90%;">
    <div class="layui-form-item">
        <label class="layui-form-label">账号</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="account" placeholder="请输入账号" required>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">昵称</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="nickname" placeholder="请输入昵称" required>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="password" class="layui-input" name="passwd" placeholder="请输入密码" required>
        </div>
    </div>
    <div class="layui-form-item">
        <label for="" class="layui-form-label">头像</label>
        <div class="layui-input-block j-upload">
            <a href="javascript:;" class="layui-btn layui-btn-primary layui-btn-sm j-upload-dom">
                <input type="file" name="avatar" id="upload_1" class="j-file" onchange="upload(event,this)" accept="image/*">
                <input type="text" class="j-upload-input" readonly="" value="" name="avatarfile">
                <i class="layui-icon layui-icon-upload"></i>选择文件</a>
        </div>
        <div class="j-img-preview">
        </div>

        <div class="layui-input-block j-form-tips">用户头像，双击删除</div>
        <script>
            function upload(event,e){
                var file = event.target.files[0]
                    , preview = document.querySelector('.j-img-preview')
                    , reader = new FileReader();
                if(!file){
                    layui.layer.msg('请选择文件');
                }else{
                    $(e).next().val($(e).val())

                    reader.addEventListener("load", function () {
                        if(preview.children.length >= 1){
                            preview.innerHTML = '';
                        }
                        var image = new Image();
                        image.title = file.name;
                        image.src = this.result;
                        image.classList.add('j-img-preview-item');
                        image.ondblclick = function(e){
                            $(e.currentTarget).parent().prev().find('input[type=text]').val('')
                            $(e.currentTarget).remove();

                        }

                        preview.append( image );
                    }, false);

                    reader.readAsDataURL(file);
                }
            }
        </script>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">手机号码</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="mobile" placeholder="请输入手机号码" required>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" name="email" placeholder="请输入邮箱" >
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
            <input type="checkbox" name="status" lay-skin="switch" lay-text="正常|禁用" checked>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">语言</label>
        <div class="layui-input-block">
            <select name="mark_lang" lay-verify="">
<!--                <option value="">请选择语言</option>-->
                <option value="zh">中文</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="create">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    layui.use(['layer','jquery','form'],function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;

        form.render();

        form.on('submit(create)',function(data){
            var loading = layer.load();
            $.post('{:url("")}',data.field,function(r){
                layer.close(loading);
                if(r.code == 1){
                    layer.msg('已提交');
                    close(1500,true);
                }else{
                    layer.msg(r.msg);
                }
            },'json')
        });
    })
</script>
{/block}
